<!DOCTYPE html>
<!-- saved from url=(0027)http://www.luoo.net/storys/ -->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width,user-scalable=no">
    <meta property="qc:admins" content="4553322067645776654">
    <meta property="wb:webmaster" content="78f40d1511de8c6b">
    <meta name="baidu-site-verification" content="xC1m9aYTgX">
    <title>故事</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link rel="stylesheet" href="/css/story.css">
    <link type="image/x-icon" href="/img/icon-logo.png" rel="shortcut icon">
    <script type="text/javascript" async="" src="/js/ga.js"></script>
    <script src="/js/hm.js"></script>
    <script src="/js/jquery-1.11.0.min.js"></script>

    <script src="/js/luoo.js"></script>

</head>
<body>


<!-- header start -->
<div class="header" th:replace="~{portal/nav :: topbar}">

</div>
<!--/// header end -->
<!-- container start -->
<div class="container" style="min-height: 499px;">

    <div class="essay-banner clearfix">
        <a href="/story/926" class="cover-wrapper" th:href="'/story/'+${storyPage.content[0].id}">
            <img src="/js/FuM6NJm4JecMPU4ggaXAKjKQM2ab.jpg" alt="人类首张在太空录制的专辑" class="cover"
                th:alt="${storyPage.content[0].title}"  th:src="${storyPage.content[0].coverImgAddr}">
        </a>
        <div class="meta">
            <a href="/story/925" class="title" th:href="'/story/'+${storyPage.content[0].id}"
               th:text="${storyPage.content[0].title}">人类首张在太空录制的专辑</a>
            <p class="content" th:text="${storyPage.content[0].subscribe}">
                太空站上有一种区别于地球的“太空文化”正在慢慢形成。这里的生活就是人类未来在其他星球生活的缩影。一切的歌曲、舞蹈、画作、诗篇等艺术文化，都将随着那里而演化，不同于在地球上的状态。也可以这样说，这算是录制这张专辑的初衷。</p>
            <p class="date" th:text="${#dates.format(storyPage.content[0].creatTime,'yyyy-MM-dd')}">2017-11-29</p>
            <p class="more">
                <a href="/story/925" class="ln-more" th:href="'/story/'+${storyPage.content[0].id}">全文</a>
            </p>
        </div>
    </div>

    <!--循环遍历区域-->
    <div class="clearfix">
        <!-- article start-->
        <div class="article article-sm">
            <!-- essay-list -->
            <div class="essay-list">


                <div class="item" th:each="story,storyStat:${storyPage}" th:if="0 != ${storyStat.index}">
                    <a href="/story/926" class="cover-wrapper" th:href="'/story/'+${story.id}">
                        <img class="cover rounded" src="/js/Ft3KtUoW1x3JtRIIpwaQXp9AwRLu.jpg"
                             alt="Sugar Man：隐没在城市里的一把声音" th:alt="${story.title}" th:src="${story.coverImgAddr}">
                    </a>
                    <div class="essay-wrapper">
                        <a href="/story/926" title="Sugar Man：隐没在城市里的一把声音" class="title" th:title="${story.title}"
                           th:text="${story.title}" th:href="'/story/'+${story.id}">
                            Sugar Man：隐没在城市里的一把声音
                        </a>
                        <div class="meta">
                            <a class="entry-author" href="#" th:text="${story.author.nickname}" th:href="'/author/topic?authorId='+${story.author.id}">LUO</a><span
                                class="separator">・</span><span class="time"
                                                                th:text="${#dates.format(story.creatTime,'yyyy-MM-dd')}">2017-11-28</span>
                        </div>
                        <div class="subscribe" th:text="${story.subscribe}">
                            他就像一位智者，一个先知，远不止是一个音乐人。
                        </div>
                    </div>
                </div>


            </div>
            <!--/// essay-list end-->

            <div class="paginator" th:if="${storyPage.totalPages }>1">
                    <a class="previous" href="/story?pn=1" th:href="'/story?pn=1'" >首页</a>
                    <a class="previous"  th:href="'/story?pn='+${storyPage.number}" th:if="${storyPage.hasPrevious()}" >上一页</a><!--<a class="page actived" rel="nofollow" href="javascript:;">1</a>-->
                    <a class="page" href="#" th:href="'/story?pn='+${storyPage.number -3}" th:text="${storyPage.number -3}" th:if="${storyPage.number } >3 ">1</a>
                    <a class="page" href="#" th:href="'/story?pn='+${storyPage.number -2}" th:text="${storyPage.number -2}" th:if="${storyPage.number } >2 ">2</a>
                    <a class="page" href="#" th:href="'/story?pn='+${storyPage.number -1}" th:text="${storyPage.number -1}" th:if="${storyPage.number } >1 ">3</a>
                    <a class="page" href="#" th:href="'/story?pn='+${storyPage.number }" th:text="${storyPage.number}" th:if="${storyPage.number >0}">4</a> <!--判断如果在当前页码如果有前面的页码则生成-->
                    <a class="page actived" href="#" rel="nofollow" th:href="'/story?pn='+${storyPage.number+1}" th:text="${storyPage.number +1}" >5</a><!--假设用户浏览的当前页是第5页,number+1是因为jpa里的pageable默认pn是从0开始的,此时pageable里的number是4-->
                    <a class="page" href="#" th:href="'/story?pn='+${storyPage.number +2}" th:text="${storyPage.number +2}" th:if="${storyPage.number +2} <= ${storyPage.totalPages }" >6</a><!--判断如果在当前页面有后面的页面则生成-->
                    <a class="page" href="#" th:href="'/story?pn='+${storyPage.number +3}" th:text="${storyPage.number +3}"  th:if="${storyPage.number +3} <= ${storyPage.totalPages }">7</a>
                    <a class="page" href="#" th:href="'/story?pn='+${storyPage.number +4}" th:text="${storyPage.number +4}"  th:if="${storyPage.number +4} <= ${storyPage.totalPages }">8</a>
                    <a class="page" href="#" th:href="'/story?pn='+${storyPage.number +5}" th:text="${storyPage.number +5}" th:if="${storyPage.number +5} <= ${storyPage.totalPages }">9</a>
                    <a class="page" href="#" th:href="'/story?pn='+${storyPage.number +6}" th:text="${storyPage.number +6}" th:if="${storyPage.number +6} <= ${storyPage.totalPages }">10</a>
                    <a class="next" href="#" th:href="'/story?pn='+${storyPage.number +2}" th:if="${storyPage.hasNext()}">下一页</a>
                    <a class="next" href="#" th:href="'/story?pn='+${storyPage.totalPages }" th:if="${storyPage.totalPages }>0">尾页</a>
                    <a class="next" href="#" th:href="'/story?pn=1'" th:if="${storyPage.totalPages }==0" >尾页</a>
            </div>
        </div>
        <!--/// article end-->

        <!-- aside start-->
        <div class="aside">

            <div class="widget">
                <div class="widget-head">
                    <span class="title">推荐文章</span>
                </div>

                <div class="widget-ct pic-widget">

                    <div class="item" th:each="hotStory,hotStoryStat:${hotStoryPage}" th:if="${hotStoryStat.index}<5">
                        <a href="/story/221" title="抚触灵魂的温度" class="cover-wrapper" th:href="'/story/'+${hotStory.id}">
                            <img src="/js/54b0feeacf945.jpg" alt="抚触灵魂的温度" class="essay-cover rounded" th:alt="${hotStory.title}" th:src="${hotStory.coverImgAddr}">
                        </a>
                        <div class="info">
                            <a href="/story/221" title="抚触灵魂的温度" class="title" th:title="${hotStory.title}" th:text="${hotStory.title}" th:href="'/story/'+${hotStory.id}">抚触灵魂的温度</a>
                            <br/>
                            <p class="description"><a
                                    href="#" th:text="${hotStory.author.nickname}" th:href="'/author/topic?authorId='+${hotStory.author.id}">作者昵称</a></p>
                        </div>
                    </div>

                </div>
            </div>

            <div class="widget">
                <div class="widget-ct">
                    <a href="#" class="ln-widget-block rounded">
                        投稿推荐
                    </a>
                </div>
            </div>

        </div>
        <!--/// aside end-->

    </div>
</div>
<!--/// container end -->
<script type="text/javascript">
    $(function () {
        $('.aside')
            .stick_in_parent({offset_top: 15})
            .on("sticky_kit:bottom", function (e) {
                //console.log( $(this) );
                $(this).css({top: 0, bottom: '', position: 'fixed'})
            });
    })
</script>
<script src="/js/jquery.sticky-kit.min.js"></script>
<!--底部区域开始-->
<div class="footer" th:replace="~{portal/footer :: footer}">

</div>
<div id="backTop" style="left: 1451.5px;">&nbsp;</div>
<div id="feedbackWrapper" style="display:none;" th:replace="~{portal/help :: sendQuestion}">

</div>

<div id="mailWrapper" style="display:none;" th:replace="~{portal/help :: sendLetter}">

</div>
<!--底部结束-->


<script src="/js/jquery.artDialog.js"></script>
<script src="/js/jquery.qtip.min.js"></script>
<script src="/js/jquery.cookie.js"></script>
<script src="/js/qrcode.min.js"></script>
<!--[if lt IE 9]>
<script src="http://s.luoo.net/thirdparty/pie/PIE_IE678.js"></script>
<script>
    $(function () {
        if (window.PIE) {
            $('.rounded,.page').each(function () {
                try {
                    PIE.attach(this);
                } catch (e) {
                }
            });
        }
    })
</script>
<![endif]-->


</body>
</html>